<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雷神官网</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2471143_3iee9owm3pn.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> 


</head>
<body>
    <div class="header">
        <div class="header-item main">
            <div class="header-left">
                <ul class="header-menu">
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">商用</a></li>
                    <li><a href="#">电竞酒店</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">手机端</a></li>
                    <li><a href="#">以旧换新</a></li>
                    <li><a href="#">用户协议</a></li>
                    <li><a href="#">English</a></li>
                </ul>
            </div>
            <div class="header-content">
                <a href="#">签到赢好礼</a>
                <a href="./02login.html"><span>登录</span></a>
                <a href="./03register .html">注册</a>
            </div>
            <div class="header-right">
                <img src="../img/22_03.png" alt="">
                <a href="./06cart.html">我的购物车</a>
            </div>
        </div>
    </div>
    <div class="seek">
        <div class="seek-item main">
            <div class="seek-img">
                <img src="../img/ia_100000004.png" alt="">
            </div>
            <div class="seek-content">
                <a href="#">
                    <img src="https://cdn.leishen.cn/upload/config/2019121710084333983.gif" >
                </a>
            </div>
            <div class="seek-right">
                <input class="" type="text" value="">
                <span class="seek-bnt">
                    <i class="iconfont icon-sousuo"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="classify">
        <div class="classify-item main">
            <div class="all-classify">
                <h4>全部商品分类</h4>
                <ul>
                    <li><a href="#">游戏笔记本</a></li>
                    <li><a href="#">30系显卡</a></li>
                    <li><a href="#">轻薄笔记本</a></li>
                    <li><a href="#">游戏台式机</a></li>
                    <li><a href="#">电竞显示器</a></li>
                    <li><a href="#">电竞生活</a></li>
                    <li><a href="#">外设周边</a></li>
                    <li><a href="#">雷域商城</a></li>
                    <li><a href="#">免费试用</a></li>
                    <li><a href="#">品牌介绍</a></li>
                    <li><a href="#">雷域商城</a></li>
                </ul>
            </div>
            <ul class="classify-menu">
                <li><a href="#">游戏笔记本</a></li>
                <li><a href="#">30系显卡</a></li>
                <li><a href="#">轻薄笔记本</a></li>
                <li><a href="#">游戏台式机</a></li>
                <li><a href="#">电竞显示器</a></li>
                <li><a href="#">电竞生活</a></li>
                <li><a href="#">外设周边</a></li>
                <li><a href="#">雷域商城</a></li>
                <li><a href="#">免费试用</a></li>
                <li><a href="#">品牌介绍</a></li>
            </ul>
        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../img/ia_100000185.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../img/ia_100000184.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../img/ia_100000183.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../img/ia_100000186.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination "></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <div class="referral">
        <div class="referral-item main">
            <div class="referral-left">
                <ul class="referral-list">
                    <li>
                        <img src="../img/ia_100000188.png" alt="">
                        <a href="#">以旧换新</a>
                        <span></span>
                    </li>
                    <li>
                        <img src="../img/ia_100000189.png" alt="">
                        <a href="#">驱动下载</a>
                    </li>
                </ul>
                <ul class="referral-list">
                    <li>
                        <img src="../img/ia_100000190.png" alt="">
                        <a href="#">雷神大法</a>
                    </li>
                    <li>
                        <img src="../img/ia_100000191.png" alt="">
                        <a href="#">售后网点</a>
                    </li>
                </ul>
            </div>
            <div class="referral-content">
                <div class="referral-hanzi">
                    <p class="referral-st">雷神911ST</p>
                    <p class="referral-shidai">十代8核 金属狂潮</p>
                    <p class="referral-price">狂欢价 <span>6599</span></p>
                </div>
                <div class="referral-img">
                    <img src="../img/ia_100000116.jpg" alt="">
                   
                </div>
            </div>
            <div class="referral-content">
                <div class="referral-hanzi">
                    <p class="referral-st">雷神911ST</p>
                    <p class="referral-shidai">十代8核 金属狂潮</p>
                    <p class="referral-price">狂欢价 <span>6599</span></p>
                </div>
                <div class="referral-img">
                    <img src="../img/ia_100000116.jpg" alt="">
                   
                </div>
            </div>
            <div class="referral-right">
                <ul class="referral-more">
                    <li class="referral-li title"><span>雷神快报</span><a href="#">更多</a></li>
                    <li class="referral-li"><span>【新闻】</span><a href="#">电竟潮流新融合，雷神助力LNG全球首家...</a></li>
                    <li class="referral-li"><span>【新闻】</span><a href="#">1月13日雷神RTX30系显卡笔记本新品炸...</a></li>
                    <li class="referral-li"><span>【新闻】</span><a href="#">战力破格，大放竞彩!雷神P12021轻薄...</a></li>
                    <li class="referral-li"><span>【新闻】</span><a href="#">最终决战!海南大学战队获京东·雷神杯...</a></li>
                    <li class="referral-li"><span>【新闻】</span><a href="#">京东·雷神杯ACL全国高校电竞精英赛总...</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 热门单品推荐 -->
    <div class="hot">
        <div class="hot-item main">
            <div class="hot-top">
                <div class="hot-tuijian">热门单品推荐</div>
                
                <div class="hot-tubiao">
                    <div class="hot-zuo">
                        <i class="iconfont icon-pagination-last"></i>
                        
                    </div>
                    <div class="hou-you">
                        <i class="iconfont icon-zuoyoujiantou-copy "></i>
                    </div>
                </div>
            </div>
            <div class="hot-bottom">
                <div class="hot-list">
                    <img src="../img/ia_100000111.jpg" alt="">
                    <p class="hot-title">雷神911ST黑武士3代标准版</p>
                    <p class="hot-xitong">Windows 10家庭版，全面屏游.
                    </p>
                </div>
                <div class="hot-list">
                    <img src="../img/ia_100000111.jpg" alt="">
                    <p class="hot-title">雷神911ST黑武士3代标准版</p>
                    <p class="hot-xitong">Windows 10家庭版，全面屏游.
                    </p>
                </div>
                <div class="hot-list">
                    <img src="../img/ia_100000111.jpg" alt="">
                    <p class="hot-title">雷神911ST黑武士3代标准版</p>
                    <p class="hot-xitong">Windows 10家庭版，全面屏游.
                    </p>
                </div>
                <div class="hot-list">
                    <img src="../img/ia_100000111.jpg" alt="">
                    <p class="hot-title">雷神911ST黑武士3代标准版</p>
                    <p class="hot-xitong">Windows 10家庭版，全面屏游.
                    </p>
                </div>
                <div class="hot-list">
                    <img src="../img/ia_100000111.jpg" alt="">
                    <p class="hot-title">雷神911ST黑武士3代标准版</p>
                    <p class="hot-xitong">Windows 10家庭版，全面屏游.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- 增值服务 -->
    <div class="appreciation">
        <div class="appreciation-item main">
            <div class="appreciation-one">
                <div class="appreciation-top">
                    <div class="appreciation-tuijian">增值服务</div>
                
                    <div class="appreciation-tubiao">
                        <div class="appreciation-zuo">
                            <i class="iconfont icon-pagination-last"></i>
                        </div>
                        <div class="appreciation-you">
                            <i class="iconfont icon-zuoyoujiantou-copy "></i>
                        </div>
                    </div>
                </div>
                <div class="appreciation-bottom">
                    <div class="appreciation-list">
                        <img src="../img/ia_100000298.jpg" alt="">
                        <p class="appreciation-title">雷神笔记本原厂3年保修服务</p>
                        <p class="appreciation-price">￥599</p>
                    </div>
                    <div class="appreciation-list">
                        <img src="../img/ia_100000299.jpg" alt="">
                        <p class="appreciation-title">雷神2年电池换新服务</p>
                        <p class="appreciation-price">￥99</p>
                    </div>
                    <div class="appreciation-list">
                        <img src="../img/ia_100000300.jpg" alt="">
                        <p class="appreciation-title">雷神游戏本意外险</p>
                        <p class="appreciation-price">￥299</p>
                    </div>
                    <div class="appreciation-list">
                        <img src="../img/ia_100000301.jpg" alt="">
                        <p class="appreciation-title">雷神游戏本外壳换新服务</p>
                        <p class="appreciation-price">￥399</p>
                    </div>
                    <div class="appreciation-list">
                        <img src="../img/ia_100000302.jpg" alt="">
                        <p class="appreciation-title">雷神游戏本全面保养业务</p>
                        <p class="appreciation-price">￥399</p>
                    </div>
                </div>
            </div>
            <!-- 热评 -->
            <div class="appreciation-one  two">
                <div class="appreciation-top">
                    <div class="appreciation-tuijian">热评产品</div>
                </div>
                <div class="appreciation-bottom">
                    <div class="appreciation-list twolist">
                        <img src="../img/ia_100000111.jpg" alt="">
                        <p class="appreciation-title">电脑都还蛮好的，唯—不足的是赠送的电脑包小了。。 。</p>
                        <p class="appreciation-price">￥5599</p>
                    </div>
                    <div class="appreciation-list twolist">
                        <img src="../img/ia_100000094.jpg" alt="">
                        <p class="appreciation-title">好康好康，弟弟很喜欢</p>
                        <p class="appreciation-price">￥219</p>
                    </div>
                    <div class="appreciation-list twolist">
                        <img src="../img/ia_100000097.jpg" alt="">
                        <p class="appreciation-title">很棒，功能很多</p>
                        <p class="appreciation-price">￥209</p>
                    </div>
                    <div class="appreciation-list twolist">
                        <img src="../img/ia_100000139.jpg" alt="">
                        <p class="appreciation-title">可以的</p>
                        <p class="appreciation-price">￥49</p>
                    </div>
                </div>
            </div>
            <!-- 粉丝同城会 -->
            <div class="appreciation-one three">
                <div class="appreciation-top">
                    <div class="appreciation-tuijian">粉丝同城会</div>
                
                    <div class="appreciation-tubiao">
                        <div class="appreciation-zuo">
                            <i class="iconfont icon-pagination-last"></i>
                        </div>
                        <div class="appreciation-you">
                            <i class="iconfont icon-zuoyoujiantou-copy "></i>
                        </div>
                    </div>
                </div>
                <div class="appreciation-bottom">
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000308.jpg" alt="">
                        <p class="appreciation-title">雷神粉丝派对大连站走起</p>
                       
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000309.jpg" alt="">
                        <p class="appreciation-title">2018粉丝畅游西安</p>
                       
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000310.jpeg" alt="">
                        <p class="appreciation-title">2018青岛同城粉丝派对</p>
                        
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000311.jpg" alt="">
                        <p class="appreciation-title ">2018深圳同城粉丝派对</p>
                        
                    </div>
                </div>
            </div>
            <!-- 电竞酒店 -->
            <div class="appreciation-one three">
                <div class="appreciation-top">
                    <div class="appreciation-tuijian">电竞酒店</div>
                
                    <div class="appreciation-tubiao">
                        <div class="appreciation-zuo">
                            <i class="iconfont icon-pagination-last"></i>
                        </div>
                        <div class="appreciation-you">
                            <i class="iconfont icon-zuoyoujiantou-copy "></i>
                        </div>
                    </div>
                </div>
                <div class="appreciation-bottom">
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000314.jpg" alt="">
                        <p class="appreciation-title">爱尊客广电大厦店</p>
                       
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000315.jpg" alt="">
                        <p class="appreciation-title">爱尊客香港中路店</p>
                       
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000316.jpg" alt="">
                        <p class="appreciation-title">爱尊客五四广场店</p>
                        
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000317.jpg" alt="">
                        <p class="appreciation-title ">轻住-雷神电竞酒店</p>
                        
                    </div>
                </div>
            </div>
            <!-- 品牌视频专区 -->
            <div class="appreciation-one three">
                <div class="appreciation-top">
                    <div class="appreciation-tuijian">电竞酒店</div>
                
                    <div class="appreciation-tubiao">
                        <div class="appreciation-zuo">
                            <i class="iconfont icon-pagination-last"></i>
                        </div>
                        <div class="appreciation-you">
                            <i class="iconfont icon-zuoyoujiantou-copy "></i>
                        </div>
                    </div>
                </div>
                <div class="appreciation-bottom">
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000320.jpg" alt="">
                        <p class="appreciation-title">雷神5周年新品发布会</p>
                       
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000321.jpg" alt="">
                        <p class="appreciation-title">-2019雷神新品上市发布会
                        </p>
                       
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000322.png" alt="">
                        <p class="appreciation-title">雷神品牌态度视频</p>
                        
                    </div>
                    <div class="appreciation-list threelist">
                        <img src="../img/ia_100000323.png" alt="">
                        <p class="appreciation-title ">品质就是雷神</p>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    <div class="foot">
        <div class="foot-item main">
            <div class="foot-top">
                <ul class="foot-img">
                    <li class="foot-li">
                        <img src="../img/ia_100000338.png" alt="">
                        
                        <a href="#">1年免费保修</a>
                        <span></span>
                    </li>
                    <li class="foot-li">
                        <img src="../img/ia_100000339.png" alt="">
                        <a href="#">退换货服务</a>
                        <span></span>
                    </li>
                    <li class="foot-li">
                        <img src="../img/ia_100000340.png" alt="">
                        <a href="#">开具发票</a>
                        <span></span>
                    </li>
                    <li class="foot-li">
                        <img src="../img/ia_100000341.png" alt="">
                        <a href="#">顺丰/中通包邮</a>
                        <span></span>
                    </li>
                    <li class="foot-li">
                        <img src="../img/ia_100000342.png" alt="">
                        <a href="#">110家售后网点</a>
                    </li>
                </ul>
            </div>
            <div class="foot-content">
                <div class="foot-left">
                    <div class="foot-list">
                        <ul class="foot-u">
                            <li class="foot-li">帮助中心</li>
                            <li>配送方式</li>
                            <li>支付方式</li>
                            <li>购物指南</li>
                            <li>发票开具</li>
                        </ul>
                    </div>
                    <div class="foot-list">
                        <ul class="foot-u">
                            <li class="foot-li">服务支持</li>
                            <li>服务标准</li>
                            <li>下载中心</li>
                            <li>保修政策</li>
                            
                        </ul>
                    </div>
                    <div class="foot-list">
                        <ul class="foot-u">
                            <li class="foot-li">关于雷神</li>
                            <li>加入雷神</li>
                            <li>联系我们</li>
                            <li>公司介绍</li>
                            
                        </ul>
                    </div>
                    <div class="foot-list">
                        <ul class="foot-u">
                            <li class="foot-li">线下门店</li>
                            <li>雷神服务</li>
                            <li>线下网点</li>
                            <li>售后网点</li>
                            
                        </ul>
                    </div>
                    <div class="foot-list">
                        <ul class="foot-u">
                            <li class="foot-li">品牌咨询</li>
                            <li>版权声明</li>
                            <li>新闻中心</li>
                            <li>营业执照</li>
                            
                        </ul>
                    </div>
                </div>
                <div class="foot-right">
                    <div class="foot-erweima">
                        <p class="foot-tit">新浪微博</p>
                        <img src="../img/ia_100000324.jpg" alt="">
                    </div>
                    <div class="foot-erweima">
                        <p class="foot-tit">雷神订阅号</p>
                        <img src="../img/ia_100000325.jpg" alt="">
                    </div>
                    <div class="foot-erweima">
                        <p class="foot-tit">雷神抖音</p>
                        <img src="../img/ia_100000326.png" alt="">
                    </div>
                    <div class="foot-erweima">
                        <p class="foot-tit">雷神交流群</p>
                        <img src="../img/ia_100000327.jpg" alt="">
                    </div>
                    <div class="foot-erweima">
                        <p class="foot-tit">售后扫一扫</p>
                        <img src="../img/ia_100000328.jpg" alt="">
                    </div>
                </div>
            </div></div>
        </div>
    </div>
    <div class="footbottom">
        <div class="footbottom-item main">
            <div class="footbottom-left">
                <div class="footbottom-top">
                    <ul class="footbottom-u">
                        <li><a href="#">以旧换新服务</a><span></span></li>
                        <li><a href="#">驱动下载</a><span></span></li>
                        <li><a href="#">神游网</a><span></span></li>
                        <li><a href="#">雷神增值服务</a><span></span></li>
                        <li><a href="#">老用户福利</a></li>
                    </ul>
                </div>
                <p>2014-2020 www.leishen.cn青岛雷神科技股份有限公司版权所有鲁ICP备14015908号-1</p>
            </div>
            <div class="footbottom-right">
                <img src="../img/ia_100000330.png" alt="">
                <img src="../img/ia_100000331.png" alt="">
                <img src="../img/ia_100000333.png" alt="">
                <img src="../img/ia_100000334.jpg" alt="">
            </div>
        </div>
    </div>


    <!-- </div> -->
    <script src="../js/bootstrap.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
        //   direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable :true,
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          
          
        })        
        </script>
    
</body>
</html>
